<template>
    <div>
        <el-divider>话题数据分析</el-divider>
        <el-row style="margin-top: 30px;">
            <el-col :span="12">
              <div style="height: 60px;font-size: 60px;line-height: 60px;margin-top: 30px;font-weight: bold;color: #539700;">{{ dayCount }}</div>
              <div style="height: 60px;font-size: 20px;line-height: 60px;font-weight: bold;">本日发表话题数量</div>
            </el-col>
            <el-col :span="12"><div>
                <div style="text-align: left;">选择查看日期：<el-date-picker @change="changeTimestamp" v-model="timestamp" type="date" placeholder="选择日期" size="small"></el-date-picker></div>
                <div id="pieChart" style="height:200px;width:100%;"></div>
            </div></el-col>
        </el-row>
        <el-divider>模块数据分析</el-divider>
        选择模块：
        <el-select v-model="moduleId" placeholder="请选择" @change="selectModule">
            <el-option v-for="(item,index) in moduleList" :key="index" :label="item.name" :value="item.id"></el-option>
            <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChangeModule"></el-pagination>
        </el-select>
        <div style="height: 280px;width: 100%;margin-top: 30px;" id="lineChart"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import { getDayCount, getTop5ByQuestionCount,listModule,getQuestionCountByMonth, } from '@/api/api'
import {formatDate, timestampToTime} from '@/util/dateUtil'
export default {
    data(){
        return {
            moduleId: '',
            dayCount: 0,
            timestamp: new Date(),
            moduleName: '',
            moduleList: [],
            current: 1,
            size: 12,
            total: 0,
            year: new Date()
        }
    },
    mounted(){
        const that = this
        that.getTop5ByQuestionCount()
        that.getDayCount()
        that.getModuleList()
    },
    methods:{
        changeTimestamp:function(){
            const that = this
            that.getTop5ByQuestionCount()
        },
        getPieChart(data) {
            const chartBox = echarts.init(document.getElementById("pieChart"));
            const option = {
                title: {
                text: '该日发题量TOP5模块',
                left: 'center'
                },
                tooltip: {
                trigger: 'item'
                },
                // legend: {
                //   top: '5%',
                //   left: 'center'
                // },
                series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '70%'],
                    // adjust the start and end angle
                    startAngle: 180,
                    endAngle: 360,
                    data: data
                }
                ]
            };
            chartBox.setOption(option);
        },
        getTop5ByQuestionCount:function(){
            const that = this
            getTop5ByQuestionCount({
                day:formatDate(that.timestamp)
            }).then(res => {
                let data = []
                res.data.forEach(item => {
                data.push({
                    value: item.questionCount,
                    name: item.module.name
                })
                })
                that.getPieChart(data)
            })
        },
        getDayCount:function(){
            const that = this
            getDayCount().then(res => {
                that.dayCount = res.data
            })
        },
        getModuleList:function(){
            const that = this
            listModule({
                name: that.moduleName,
                current: that.current,
                size: that.size
            }).then(res => {
                that.total = res.data.total
                that.moduleList = res.data.records
                if(that.total > 0 && that.moduleId == ''){
                    that.moduleId = that.moduleList[0].id
                    that.getQuestionCountByMonth()
                }
            })
        },
        currentChangeModule:function(current){
            const that = this
            that.current = current
            that.getModuleList()
        },
        getQuestionCountByMonth:function(){
            const that = this
            getQuestionCountByMonth({
                moduleId:that.moduleId,
                year: that.year.getFullYear() + ''
            }).then(res => {
                let xData = [that.year.getFullYear()+'-01',that.year.getFullYear()+'-02',that.year.getFullYear()+'-03',
                that.year.getFullYear()+'-04',that.year.getFullYear()+'-05',that.year.getFullYear()+'-06',
                that.year.getFullYear()+'-07',that.year.getFullYear()+'-08',that.year.getFullYear()+'-09',
                that.year.getFullYear()+'-10',that.year.getFullYear()+'-11',that.year.getFullYear()+'-12']
                let yData = []
                xData.forEach(item => {
                    yData.push(res.data[item])
                })
                that.getLineChart(xData,yData)
            })
        },
        getLineChart:function(xData,yData){
            const chartBox = echarts.init(document.getElementById("lineChart"));
            const option = {
                title: {
                    text: '本年各月发题量',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: yData,
                    type: 'line',
                    areaStyle: {}
                    }
                ]
            };
            chartBox.setOption(option);
        },
        selectModule:function(id){
            const that = this
            that.moduleId = id
            that.getQuestionCountByMonth()
        }
    }
}
</script>